import React, { forwardRef, useState, useEffect } from 'react'
import './showinfopie.scss'
import * as echarts from "echarts";
const Showinfo = forwardRef((props, ref) => {
    const [infodata, setdata] = useState([])
    const getdata = () => {
        setdata(ref)
    }
    const drawlist = () => {
        let { name } = ref;
        return <h1 className='title'>{name}</h1>
    }
    const drawbar = () => {
        let { list } = ref;
        var a = null
        a = Object.values(list)
        var list1 = ['保险杠破损率', '车底盘磨损', '刹车盘磨损率', '车表完整率', '整体健康度'];
        let piedata = a.map((id, i) => ({
            name: list1[i],
            value: a[i],
        }));
        var datamax = piedata.sort((a, b) => {
            return b.value - a.value
        })
        console.log(datamax[0]);
        var Mycharts = echarts.init(document.getElementById("pie"));
        let option = {
            backgroundColor: "#fff",
            title: {
                text: "车检预警",
                x: "center",
            },
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: {
                        show: true,
                        type: ["pie", "funnel"],
                    },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
            calculable: true,
            series: [
                {
                    name: "面积模式",
                    type: "pie",
                    radius: [30, 90],
                    center: ["45%", "50%"],
                    roseType: "area",
                    data: piedata
                },
            ],
        }
        Mycharts.setOption(option)
        window.onresize = () => {
            Mycharts.resize();
        }
    }
    const atteninfo = () => {
        let { list } = ref;
        var a = null
        a = Object.values(list)
        var list1 = ['5年内糖尿病', '4年内高血压发生症状', '肥胖症', '血脂异常', '肾衰竭'];
        let piedata = a.map((id, i) => ({
            name: list1[i],
            value: a[i],
        }));
        var datamax = piedata.sort((a, b) => {
            return b.value - a.value
        })
        if (datamax[0].name == '5年内糖尿病') {
            return (
                <div className='atteninfo'>
                    <h1 className='atttitle'>出行建议</h1>
                    <p className='info'>
                    如遇下雨天，要注意雨天出行安全。雨天行驶，驾驶人视线受大雨阻碍看不清道路，在行驶中应减低车速，及时打开雨刮器，谨慎驾驶。降雨导致道路湿滑，为防止车辆侧滑，必须时刻保持警惕，低速行驶。雨天车窗容易产生雾气，应及时擦去或者微开窗户。雨中视线受到阻碍，一定要打起精神注意行人，行驶中注意观察四周是否有行人通过，注意减速行驶和鸣笛提示。
                        </p>
                </div>
            )
        } else if (datamax[0].name == '4年内高血压发生症状') {
            return (
                <div className='atteninfo'>
                    <h1 className='atttitle'>出行建议</h1>
                    <p className='info'>
                    1.在道路上行走，要走人行道；没有人行道的道路，要靠路边行走。
2.集体外出时，最好有组织、有秩序地列队行走；结伴外出时，不要相互追逐、打闹、嬉戏；行走时要专心，注意周围情况，不要东张西望、边走边看书报或做其他事情。
3.在没有交通民警指挥的路段，要学会避让机动车辆，不与机动车辆争道抢行。
                    </p>
                </div>
            )
        } else if (datamax[0].name == '肥胖症') {
            return (
                <div className='atteninfo'>
                    <h1 className='atttitle'>出行建议</h1>
                    <p className='info'>
                    1.坐公共汽车：排队上车，先下后上；在车子里，不要头手伸出窗外，容易被别的车刮伤；不要坐在开动的车厢座位上看书；没有座位时，要拉好身边的扶手；不得向车内外乱扔东西；不要在开动的车厢里乱跑，容易摔跤。
2.坐出租车：冲到马路当中去拦车很危险，在路边招手司机也能看见；下车时要从右边下车，注意后面的车辆和行人；下车前看看座椅上有没有东西，不要把东西忘在出租车上了；如果下车要穿过马路，走到出租车后面比前面更安全。
3.坐父母开的车：不要提问题和唱歌，让父母分心影响开车;不要去开车门，在后排坐好；系好安全带；如果坐前排，不要扳动方向盘、排档杆，很容易造成事故；不能在车厢里放带尖角的玩具，容易受伤。
                        </p>
                </div>
            )
        } else if (datamax[0].name == '血脂异常') {
            return (
                <div className='atteninfo'>
                    <h1 className='atttitle'>出行建议</h1>
                    <p className='info'>
                    正确使用安全带，安全座椅
1.未满12周岁的孩子乘坐私家车时，要正确使用儿童安全椅，坐在后排的位置。
2.足龄的学生需要正确系上安全带。安全带要尽量系在髋部和胸前，从肩上拉过来，横跨在骨盆和胸腔之上，形成一个水平放置的V字。安全带只可一个人使用，严禁多人共用。
                        </p>
                </div>
            )
        } else if (datamax[0].name == '肾衰竭') {
            return (
                <div className='atteninfo'>
                    <h1 className='atttitle'>出行建议</h1>
                    <p className='info'>
                    “抱孩子就是爱孩子”，现如今依然有不少家庭怀着这种想法。所以，乘车过程中，抱着孩子情况比较常见。普通情况下大人的手臂是可以起到“固定”孩子的作用，可一旦发生碰撞事故，情况却完全不一样了。速度变化带来的惯性力是非常巨大的，人的双臂根本无法约束住孩子。失去约束的孩子在车内因二次、三次碰撞导致的伤害很常见。因此，不要试图以成人的双臂去替代安全带的作用。抱孩子坐车并不是“爱孩子”，而是实打实的“害孩子”。
                        </p>
                </div>
            )
        }
    }
    useEffect(() => {
        getdata()
        drawbar()
    }, [])
    return (
        <div className='show'>
            {drawlist()}
            <div id='pie'></div>
            {atteninfo()}
        </div>
    )
})
export default Showinfo